<template>
  <div class="content">
    <div class="block">
      <Navigation
          :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:3,value:'人才筛选',url:''}]"></Navigation>
      <div class="block screen-block">
        <div class="screen-item">
          <div class="screen-label">经验</div>
          <div class="screen-content">
            <div :class="experienceActive===0?'active':''" @click="experienceActive=0" class="option-item radio">
              不限
            </div>
            <div v-for="(item,index) in experienceList" :key="item.id" :class="experienceActive===item.id?'active':''"
                 @click="experienceActive=item.id" class="option-item radio">
              {{ item.data }}
              <template v-if="index>0"></template>
              <template v-if="index===experienceList.length-1"></template>
            </div>
          </div>
        </div>
        <div class="screen-item">
          <div class="screen-label">薪资</div>
          <div class="screen-content">
            <div :class="salaryActive===0?'active':''" @click="salaryActive=0" class="option-item radio">
              不限
            </div>
            <div v-for="(item,index) in salaryList" :key="item.id" :class="salaryActive===item.id?'active':''"
                 @click="salaryActive=item.id" class="option-item radio">
              {{ item.data }}
              <template v-if="index===salaryList.length-1">以上</template>
            </div>
          </div>
        </div>
        <div class="screen-item">
          <div class="screen-label">教育经历</div>
          <div class="screen-content">
            <div :class="educationActive===0?'active':''" @click="educationActive=0" class="option-item radio">
              不限
            </div>
            <div v-for="(item,index) in educationList" :key="item.id" :class="educationActive===item.id?'active':''"
                 @click="educationActive=item.id" class="option-item radio">
              {{ item.data }}
            </div>
          </div>
        </div>
        <div class="screen-item">
          <div class="screen-label">行业</div>
          <div class="screen-content">
            <div class="option-item2 ">
              <el-cascader v-model="jobType" placeholder="请选择行业"
                           :options="category"
                           :props="optionProps"
                           clearable
                           :show-all-levels="false"
                           @change="handleChange"></el-cascader>
            </div>
          </div>
        </div>
      </div>
      <div class="block info-block">
        <div class="block-col personal" v-loading="personalLoading">
          <template v-if="personalList.length>0">
            <router-link :to="{name:'personalDetail',query:{id:item.user.cid}}" class="personal-item"
                         v-for="(item,index) in personalList" :key="item.id">
              <div class="information-item">
                <div class="personal-img">
                  <img :src="item.user.faceUrl" class="image-item">
                </div>
                <div class="name-item">
                  <div class="personal-name">{{ item.realName }}</div>
                  <div class="personal-wage">{{ item.salaryMin }}-{{ item.salaryMax }}元</div>
                </div>
                <div class="personal-information">
                  <div class="item1">{{ item.birthday }}岁&nbsp;&nbsp;<span style=" color: darkGray">/</span>&nbsp;
                  </div>
                  <div class="item1" v-if="item.educationText">&nbsp;{{ item.educationText }}&nbsp;&nbsp;<span
                      style=" color: darkGray">/</span>&nbsp;
                  </div>
                  <div class="item1" v-else>暂无学历&nbsp;&nbsp;<span style=" color: darkGray">/</span>&nbsp;</div>
                  <div class="item1" v-if="item.workTimeStart==='0年'">
                    工作经验小于一年
                  </div>
                  <div class="item1" v-else>&nbsp;{{ item.workTimeStart }}工作经验</div>
                </div>
              </div>
              <div class="personal-label-block">
                <div v-for="(item1,index) in item.label" class="personal-label-item">{{ item1 }}</div>
              </div>
              <div class="address-item">
                <div class="address-title">想找：</div>
                <div class="personal-address">
                  {{ item.postName }}&nbsp;&nbsp;<span>/</span>&nbsp;&nbsp;{{ item.jobText }}
                </div>
              </div>
            </router-link>
          </template>
          <el-empty v-else style="width: 100%;"></el-empty>
        </div>
        <div class="user-info-block">
          <div class="invite-image">
            <router-link :to="{name:'jobIndex'}">
              <img src="@/assets/images/7.png" style="width: 380px; height: 100px; margin-top: 5px;"></router-link>
          </div>
        </div>
      </div>
      <div v-if="personalList.length>0" style="display: flex; justify-content: center;align-content: flex-end;">
        <el-pagination
            background
            :page-size="limit"
            layout="prev, pager, next"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
import {getCustomerListApi, getEducationApi, getExperienceApi, getSalaryListApi} from "@/api/personal";
import {findJobNameApi} from "@/api/position";

export default {
  name: "personalFiltrate",
  components: {Navigation},
  data() {
    return {
      jobType: '',
      jobLevel: '',
      category:[],
      optionProps: {
        value: 'id',
        label: 'jobTitle',
        children: 'subLevelModelList',
        checkStrictly: true,
        emitPath: true
      },
      salaryList: [],
      salaryActive: 0,

      experienceList: [],
      experienceActive: 0,

      educationActive: 0,
      educationList: [],

      personalLoading: false,
      personalList: [],
      page: 1,
      limit: 10,
      count: 0
    }
  },
  methods: {

    //三级职业
    findJobName() {
      findJobNameApi({postType:1}).then((res) => {
        console.log(res)
        this.category=res
      }).finally(()=>{
      })
    },

    handleChange(value) {
      if(value.length===3)
      {
        this.jobType = value[2]??'';
        this.jobLevel = 3;
      }
      if(value.length===2)
      {
        this.jobType = value[1]??'';
        this.jobLevel = 2;
      }
      if(value.length===1)
      {
        this.jobType = value[0]??'';
        this.jobLevel = 1;
      }

    },
    getPersonal() {
      this.personalLoading = true
      getCustomerListApi({
        sceneType: 1,
        expId: this.experienceActive,
        eduId: this.educationActive,
        salaryId: this.salaryActive,
        jobType: this.jobType,
        jobLevel: this.jobLevel,
        page: this.page,
        limit: this.limit
      }).then((res) => {
        this.personalList = res.list ?? []
        this.count = res.count
      }).finally(() => {
        this.personalLoading = false
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getPersonal()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getPersonal()
    },
    getExperience() {
      getExperienceApi().then((res) => {
        this.experienceList = res
      }).finally(() => {
      })
    },
    getEducation() {
      getEducationApi().then((res) => {
        this.educationList = res
      }).finally(() => {
      })
    },
    getSalaryList() {
      getSalaryListApi().then((res) => {
        this.salaryList = res
      }).finally(() => {
      })
    },
  },
  watch: {//监听
    experienceActive: {
      handler() {
        this.getPersonal();
      },
    },
    salaryActive: {
      handler() {
        this.getPersonal();
      },
    },
    educationActive: {
      handler() {
        this.getPersonal();
      },
    },
    jobType:{
      handler(){
        this.getPersonal();
      },
    }
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.jobType*=1;
    this.getExperience();
    this.getEducation();
    this.getPersonal();
    this.getSalaryList();
    this.findJobName();

  }
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: $fullMinHeight;
}

.block {
  width: $contentWidth;
  margin: 0 auto;
  margin-top: 16px;
}

.block.create-resume-block {
  height: 165px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.block.job-fair-block {
  height: 120px;
  display: flex;
  flex-direction: row;

  img {
    width: calc((100% - 40px) / 3);
    height: 100%;
    margin-right: 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  img:last-child {
    margin-right: 0;
  }
}

.block.screen-block {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .screen-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    min-height: 45px;
    align-items: center;

    .screen-label {
      width: 90px;
      margin-right: 10px;
      font-weight: bold;
      font-size: 15px;
    }

    .screen-content {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 14px;
      padding: 10px 0;

      .option-item {
        margin: 0 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 95px;
        height: 25px;
      }
      .option-item2{
        cursor: pointer;
      }
      .option-item.photo {
        width: 60px;
        height: 60px;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .option-item.photo.active {
        border: 1px solid $orange;
      }

      //.option-item.radio{
      //  color: $darkGray;
      //}
      .option-item.radio.active {
        color: white;
        border-radius: 30px;
        background-color: $orange;
      }

      .option-item.select {
        border: 1px solid #efefef;
        border-radius: 7px;
        padding: 5px;
        width: 160px;
        color: $darkGray;
      }

      .option-text {
        border: 1px solid #efefef;
        border-radius: 7px;
        padding: 15px;
        width: 80px;
        height: 30px;
        color: $darkGray;
        margin-left: 20px;
      }

      .option-type {
        width: 15px;
        height: 15px;
        margin-top: 4px;
        margin-left: 25px;
      }

      .option-name.text {
        //color: $darkGray;
        margin-left: 15px;
        margin-top: 2px;
      }
    }

    .screen-content1 {
      width: calc(100% - 10px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 14px;
      padding: 10px 0;

      .option-item {
        margin: 0 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 95px;
        height: 25px;
      }

      .option-item.photo {
        width: 60px;
        height: 60px;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .option-item.photo.active {
        border: 1px solid $orange;
      }

      //.option-item.radio{
      //  color: $darkGray;
      //}
      .option-item.radio.active {
        color: white;
        border-radius: 30px;
        background-color: $orange;
      }

      .option-item.select {
        border: 1px solid #efefef;
        border-radius: 7px;
        padding: 5px;
        width: 160px;
        color: $darkGray;
      }

      .option-text {
        border: 1px solid #efefef;
        border-radius: 7px;
        padding: 15px;
        width: 80px;
        height: 30px;
        color: $darkGray;
        margin-left: 20px;
      }

      .option-type {
        width: 15px;
        height: 15px;
        margin-top: 4px;
        margin-left: 25px;
      }

      .option-name.text {
        //color: $darkGray;
        margin-left: 15px;
        margin-top: 2px;
      }
    }
  }
}

.block.info-block {
  display: flex;
  flex-direction: row;

  .list-block {
    width: calc(100% - 400px);
    margin-right: 20px;
    display: flex;
    flex-direction: column;

    .position-item {
      margin-bottom: 20px;
    }
  }

  .block-col.personal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;

    .personal-item {
      padding: 20px;
      width: calc((100% - 30px) / 2);
      margin-right: 15px;
      margin-bottom: 15px;
      background-color: #fff;

      .information-item {
        border-bottom: 1px solid $lightGray;

        .personal-img {
          width: 50px;
          height: 50px;
          position: absolute;
          margin-bottom: 15px;

          .image-item {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        .name-item {
          display: flex;
          flex-direction: row;
          margin-left: 70px;
          margin-bottom: 15px;

          .personal-name {
            font-weight: bold;
            font-size: 18px;
          }

          .personal-wage {
            font-weight: bold;
            font-size: 18px;
            color: $orange;
            margin-left: 20px;
          }
        }

        .personal-information {
          margin-left: 70px;
          margin-top: 10px;
          margin-bottom: 15px;
          //border-right: #e4e4e4 1px solid;
          display: flex;
          flex-direction: row;

          .item1 {
            font-size: 13px;
            color: $darkGray;
            //border-right: $darkGray 1px solid;
            //margin-right: 5px;
            //padding-right: 5px;
          }

          .item2 {
            font-size: 13px;
            color: $darkGray;
            //border-right: $darkGray 1px solid;
            //margin-right: 5px;
            //padding-right: 5px;
          }

          .item3 {
            font-size: 13px;
            color: $darkGray;
          }
        }
      }

      .personal-label-block {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 15px;

        .personal-label-item {
          margin-right: 10px;
          margin-bottom: 10px;
          color: $darkGray;
          background: $lightGray;
          padding: 4px 8px;
          font-size: 13px;
        }
      }

      .address-item {
        display: flex;
        flex-direction: row;
        font-size: 13px;

        .address-title {
          color: $darkGray;
          width: 40px;
        }

        .personal-address {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .personal-item.more {
      align-items: center;
      justify-content: center;
      font-size: 15px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 5px;

      .more {
        margin-top: 8px;
        font-size: 14px;
        color: $orange;
        cursor: pointer;
      }
    }
  }

  .user-info-block {
    width: 380px;
    display: flex;
    flex-direction: column;

    .user-info-item {
      padding: 20px;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 20px;
    }

    .user-info-item:last-child {
      margin-bottom: 0;
    }

    .user-info-item.user {
      display: flex;
      flex-direction: column;
      padding-bottom: 0;

      .user-photo-block {
        display: flex;
        flex-direction: row;
        align-items: center;

        .user-photo {
          width: 85px;
          height: 85px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .user-name-block {
          width: calc(100% - 95px);
          display: flex;
          flex-direction: column;

          .user-name {
            font-weight: bold;
            font-size: 18px;
          }

          .edit-resume {
            font-size: 14px;
            margin-top: 10px;
            color: $darkGray;
          }
        }
      }

      .statistics-block {
        display: flex;
        flex-direction: row;
        padding-bottom: 10px;
        border-bottom: 1px solid $lightGray;

        .statistics-item {
          width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 20px;

          .statistics-count {
            font-size: 26px;
            font-weight: bold;
          }

          .statistics-name {
            margin-top: 2px;
            font-size: 15px;
            color: #000;
          }
        }
      }

      .message {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 50px;

        .my-message {
          flex-grow: 1;
        }

        .iconfont {
          flex-grow: 0;
        }
      }
    }

    .user-info-item.privacy {
      display: flex;
      flex-direction: column;

      .privacy-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        font-size: 14px;
        align-items: center;

        .label {
          flex-grow: 1;
        }

        .value {
          flex-grow: 0;
          color: $darkGray;
        }
      }

      .privacy-item:last-child {
        margin-bottom: 0;
      }

      .privacy-item.resume {
        .label {
          font-weight: bold;
          font-size: 18px;
        }

        .setting {
          color: $orange;
        }
      }
    }

    .user-info-item.setting {
      display: flex;
      flex-direction: row;
      align-items: center;

      .name {
        flex-grow: 1;
        font-size: 18px;
        font-weight: bold;
      }

      .iconfont {
        flex-grow: 0;
      }
    }
  }
}
</style>
